import React, { Component } from 'react';
import { Form, Input, Button, Row, Col, message } from 'antd';
import api from '../../../services/api';
import { authLogin } from '../../../services/loginServices';
import { encryption, hehLocalStorage } from '../../../utils/utils';
import { admin_url } from '../../../../config/admin.config';
import { connect } from 'dva';

class Login extends Component {
  formRef = React.createRef();

  constructor(props) {
    super(props);
    this.state = {
      type: '密码登录',
      key: 1,
      hasNote: false,
      second: 60,
      randomCode: parseInt(Math.random() * 10000000000000000),
    };
    this.times = '';
    if (localStorage && localStorage.sessKey) {
      this.stopAllTimer = true;
      this.props.history.replace('/');
    }
  }

  componentDidMount() {
    this.props.dispatch({
      type: 'MainLayoutModel/resetTopTabs',
      payload: [],
    });
  }

  componentWillUnmount() {
    this.times && clearInterval(this.times);
  }

  render() {
    return <div>{this.makeBaseView()}</div>;
  }

  makeBaseView() {
    return (
      <div className={'LoginCss'}>
        <h1 style={{ fontSize: 26 }}>e盘点后台管理系统</h1>
        <div style={{ marginTop: 60 }}>
          <Form
            autoComplete="off"
            ref={this.formRef}
            className={'formCss'}
            onFinish={this.onSubmit}
          >
            <Form.Item
              name={'loginCode'}
              rules={[{ required: true, message: '账号不能为空!' }]}
            >
              <Input maxLength={11} placeholder="请输入账号" />
            </Form.Item>
            <Form.Item
              className={'formItem'}
              name={'password'}
              rules={[
                {
                  required: true,
                  message: '密码不能为空',
                },
              ]}
            >
              <Input
                maxLength={16}
                type={'password'}
                placeholder={'请输入密码'}
              />
            </Form.Item>
            <div style={{ position: 'relative' }}>
              <Form.Item
                className={'formItem'}
                name={'captcha'}
                rules={[
                  {
                    required: true,
                    message: '验证码不能为空',
                  },
                ]}
              >
                <Input maxLength={16} placeholder={'请输入验证码'} />
              </Form.Item>
              <img
                style={{
                  position: 'absolute',
                  top: '0',
                  right: 113,
                  cursor: 'pointer',
                }}
                width={100}
                onClick={() => {
                  this.setState({
                    randomCode: parseInt(Math.random() * 10000000000000000),
                  });
                }}
                src={admin_url + api.authCaptcha + '/' + this.state.randomCode}
                alt=""
              />
            </div>
            <Form.Item>
              <Button
                loading={this.state.btnLoading}
                type="primary"
                htmlType="submit"
              >
                登录
              </Button>
            </Form.Item>
          </Form>
          {/*<Row className={'regTxt'}>*/}
          {/*  <Col span={12}>*/}
          {/*    <a onClick={() => this.props.history.push('/login/register')}>*/}
          {/*      注册*/}
          {/*    </a>*/}
          {/*  </Col>*/}
          {/*  <Col span={12} style={{ textAlign: 'right' }}>*/}
          {/*    <a*/}
          {/*      onClick={() => this.props.history.push('/login/resetPassword')}*/}
          {/*    >*/}
          {/*      忘记密码*/}
          {/*    </a>*/}
          {/*  </Col>*/}
          {/*</Row>*/}
        </div>
      </div>
    );
  }

  onSubmit = value => {
    this.setState({ btnLoading: true });
    authLogin({
      ...value,
      password: encryption.MD5(value.password),
      randomCode: this.state.randomCode,
    })
      .then(res => {
        message.success('登陆成功');
        hehLocalStorage.setItem('userInfo', res);
        this.setState({
          btnLoading: false,
        });
        this.props.history.push('/');
      })
      .catch(error => {
        this.setState({
          btnLoading: false,
          randomCode: parseInt(Math.random() * 10000000000000000),
        });
      });

    // this.stopAllTimer = true;
    // setTimeout(() => {
    //   this.props.history.push('/');
    // }, 10);
  };
}

export default connect(({ MainLayoutModel }) => ({}))(Login);
